<template>
  <div class="box">
    <!-- 小驼峰的写法 -->
    <ul>
      <li v-for="item in list" :key="item.id">
        {{item.name}}--{{item.price}}
      </li>
    </ul>
    <!-- 子类 给父类值 通过函数 -->
    <button @click="fnClick(11)"    > 直接触发函数 </button>
    <button @click="$emit('clickddddd',22,'a',33)"    > 触发父类事件 </button>
    <button @click="sonfn"    > 事件触发父类事件 </button>
  </div>
</template>

<script setup>
import { defineProps,defineEmits } from 'vue';
// let props = defineProps(["list","key-val"])
let props = defineProps({
  list:Array,
  ['key-val']:{
    type:Number,
    default:200
  },
  "fn-click": Function
})
// 声明组件上 的事件名,是一个函数
// (event, ...args) => instance.emit(event, ...args)
let emit =  defineEmits(["clickdddd"])

let sonfn = () => {
  let sum = 0
  props.list.forEach((item) => {
    sum += item.price
  })
  emit("clickddddd",sum)
  console.log(sum);
}

</script>

<style  scoped>
.box {
  width: 500px;
  height: 500px;
  border: 1px solid #ccc;
}
</style>